<html lang="cn">

<head>
  <meta charset="UTF-8">
  <script src="./rem.js"></script>
  <meta name="format-detection" content="telephone = no">
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title></title>
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="./common.css">
  <link rel="stylesheet" href="./feedback.css">
  <script>
    function rembig(){
      setRemSize()
      window.addEventListener("resize",setRemSize,false)
      function setRemSize(){
        var width = document.documentElement.clientWidth
        if (width > 750) {
            width = 750
        }
        var _clientWidth = width / 7.5+'px'
        document.documentElement.style.fontSize = _clientWidth
      }
    }
    rembig()
  </script>
</head>

<body>
  <div class="container">
    <div class="topRule">
      留言时要把咨询或投诉举报的事情描述清楚，投诉举报某品牌刷票必
      须有证据，留言内容可以上传图片。
    </div>
    <form class="content">
      <div class="secondNeedInput needFileGroup">
        <div class="title">
          留言信息
          <!-- <div class="remarks">(上传图片大小请控制在5M以内）</div> -->
        </div>
        <div class="label" style="width:100%;margin-bottom: 0.3rem;color: #555555;padding-left: 0.06rem"><span>留言内容</span></div>
        <textarea class="needTextarea" name="tarea" placeholder="为了您的反馈得到及时处理，请详细描述所遇到的问题谢谢！" ></textarea>
        <div class="needFile">
          <div class="mark">上传中</div>
          <label>
            <img class="showImage" />
            <div class="slotClass">
              <img src="./images/报名活动页_slices/组 535@2x.png">
              使图文清晰可见
            </div>
            <input class="fileClass" type="file" id="img0" />
          </label>
        </div>
        <div class="needFile">
          <div class="mark">上传中</div>
          <label>
            <img class="showImage" />
            <div class="slotClass">
              <img src="./images/报名活动页_slices/组 535@2x.png">
              使图文清晰可见
            </div>
            <input class="fileClass" type="file" id="img1"/>
          </label>
        </div>
        <div class="needFile">
          <div class="mark">上传中</div>
          <label>
            <img class="showImage" />
            <div class="slotClass">
              <img src="./images/报名活动页_slices/组 535@2x.png">
              使图文清晰可见
            </div>
            <input class="fileClass" type="file" id="img2" />
          </label>
        </div>
        <div class="bottomRemarks">
          (上传可以为JPG、PNG、GIF格式, 大小控制在5M以内)
        </div>
      </div>
      <ul class="thirdNeedInput needInputGroup">
        <!-- <div class="title">身份验证</div> -->
        <li>
          <div class="label"><p>联系人</p></div>
          <input type="text" value="" name="phone" placeholder="请输入您的姓名">
        </li>
        <li>
          <div class="label"><p>联系电话</p></div>
          <input type="text" value="" name="code" placeholder="请输入联系电话">
        </li>
        <li>
          <div class="label"><span>验证码</span></div>
          <input type="text" value="" name="smsCode" placeholder="请输入短信验证码">
          <div class="code">
            <img src="" alt="" srcset="">
          </div>
        </li>
        <div class="getCode">看不清，换一张</div>
      </ul>
      <div class="submit">
        <button type="button" class="clearSubmit">重写</button>
        <button type="button" class="buttonSubmit">提交反馈</button>
      </div>
    </form>
    <div class="bottomInfo">
      <img src="./images/报名活动页_slices/WeChat0cb4f1f9fa69309f03cd06c58006f7f2.png">
      <div style="color: rgba(156,156,156,1)">客服电话：123456789</div>
      <div class="feedback"><span>意见反馈</span> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<span>推荐参与活动</span></div>
      <div>中信品牌网</div>
    </div>
    <div class="bottomTab">
      <div class="tab">
        <img src="./images/报名活动页_slices/首页 (3)@2x.png" alt="" srcset="">
        <p>首页</p>
      </div>
      <div class="tab">
        <img src="./images/报名活动页_slices/分享 (1)@2x.png" alt="" srcset="">
        <p>返回投票</p>
      </div>
    </div>
  </div>


  
  <div class="toast">
    信息填写不完整，请检查并修改
  </div>
  <div class="dialog failDialog" >
    <div class="mark">
      <div class="container">
        <img src="./images/意见反馈/bmcg_tjsb_icon@2x.png" alt="" srcset="">
        <p>问题反馈提交失败，请重试</p>
        <button class="button failDialogBtn">我知道了</button>
      </div>
    </div>
  </div>
  <div class="dialog successDialog" >
    <div class="mark">
      <div class="container">
        <img src="./images/意见反馈/bmcg_tjcg_icon@2x.png" alt="" srcset="">
        <p>您已成功提交问题反馈</p>
        <button class="button successDialogBtn">我知道了</button>
      </div>
    </div>
  </div>
</body>
</html>

<script>

  var activitiesInit = {
    getCode: function () {
      var timer, z
      $('.getCode').click(function () {
        if (z) return
        console.log('???')
        z = 60
        timer = setInterval(() => {
          z--
          $('.getCode').text(z + 's')
          if (!z) {
            z = 0
            $('.getCode').text('获取验证码')
            clearInterval(timer)
          }
        }, 1000)
      })
    },
    submit: function () {
      var needFiles = $('.needFile')
      var showImages = $('.showImage')
      var toastTimer
      var files = []
      for (var i = 0; i < 3; i++) {
        (function (i) {
          $('#img' + i).change(function () {
            $($(needFiles[i]).children()[0]).css('display', 'flex')
            var file = this.files[0]
            files[i] = file
            if (window.FileReader) {
              var reader = new FileReader()
              reader.readAsDataURL(file)
              reader.onloadend = function (e) {
                console.log(e, i, file)
                // var params = new FormData()
                // params.append('file',oFiles[0])
                $(showImages[i]).css('display', 'block')
                $(showImages[i]).attr('src', e.target.result)
                // $($(needFiles[i]).children()[0]).css('display', 'none')
              }
            }
          })
        })(i)
      }
      $('.buttonSubmit').click(function () {
        var t = $('form').serializeArray()
        console.log(t)
        $('.failDialog').fadeIn(133)
        $('.successDialog').fadeIn(133)
        $('.toast').css('display', 'flex')
        clearInterval(toastTimer)
        toastTimer = setTimeout(() => {
          $('.toast').css('display', 'none')
        }, 3000)
      })
      $('.clearSubmit').click(function () {
        console.log(files)
        files = []
        for (var i = 0; i < 3; i++) {
          (function (i) {
            console.log(i)
            $(showImages[i]).removeAttr('src', '')
            $(showImages[i]).css('display', 'none')
            $($(needFiles[i]).children()[0]).css('display', 'none')
          })(i)
        }
        $('.content')[0].reset()
      })
    },
    toast: function () {},
    dialog: function () {
      $('.failDialogBtn').click(function () {
        $('.failDialog').fadeOut(133)
      })
      $('.successDialogBtn').click(function () {
        $('.successDialog').fadeOut(133)
      })
    }
  }
  $(document).ready(function () {
    for (var i in activitiesInit) {
      activitiesInit[i]()
    }
    var con = new Contact()
    con.addTopBack()
  })
</script>
